<!--TODO: 优化行距 -->
<template>
	<section id="mysql-manager">
		<el-row :gutter="20">
			<el-col :span="5" v-for="db in dbs"  >
				<el-card  class="bg-card">
					<!--<img src=https://raw.githubusercontent.com/taylorchen709/markdown-images/master/vueadmin/user.png class="image">-->
					<div >
						<div >
							<strong > {{db.name}}</strong>
							<span  style="float: right" ><i class="iconfont" style="font-weight: bold;color: green">&#xe604;</i> {{db.instance}}</span>
						</div>
						<hr>
						<div >
							<el-row>
								<el-col :span="22" >
									<el-badge :value="db.jobnum"  type="error" class="item">
									<el-tag type="default" size="mini">DML/DDL&nbsp;&nbsp;</el-tag>
								</el-badge>
								</el-col>
								<el-col :span="2">
									<el-button type="text"  @click.native.prevent="dbHandel(db.name)"  class=" fa fa-list-alt" size="mini"></el-button>

								</el-col>
							</el-row>


						</div>

						<div >

							<el-row>
								<el-col :span="22" style="margin-top: 10px">
									<time class="time">查询</time>
								</el-col>
								<el-col :span="2">
									<el-button type="text" @click.native.prevent="selectExec(db.name,db.instance)"  class="fa fa-search"  ></el-button>
								</el-col>
							</el-row>

						</div>
						<div >
							<el-row>
								<el-col :span="22" style="margin-top: 10px">
									<time class="time">慢日志查询</time>
								</el-col>
								<el-col :span="2">
									<el-button type="text"  class="button fa fa-eye" @click.native.prevent="slowLogShow(db.name,db.instance)"></el-button>
								</el-col>
							</el-row>




						</div>
						<div >
							<el-row>
								<el-col :span="22" style="margin-top: 10px">
									<time class="time">备份</time>
								</el-col>
								<el-col :span="2">
									<el-button type="text"  class="button fa fa-copy" disabled @click.native.prevent="backupDb(db.name,db.instance) " ></el-button>
								</el-col>
							</el-row>




						</div>
						<div >

							<el-row>
								<el-col :span="22" style="margin-top: 10px">
									<time class="time">监控面板</time>
								</el-col>
								<el-col :span="2">
									<el-button type="text"  class="button fa fa-bar-chart" ></el-button>
								</el-col>
							</el-row>



						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</section>
</template>


<style>
	#mysql-manager .item {
		margin-top: 5px;
	}
	#mysql-manager .time {
		font-size: 13px;
		color: #999;
	}

	#mysql-manager .bg-card {
		background-color: #FAFAFA;
	}


</style>
<script>
    import { getDbList } from '../../api/api'
    export default {
        data() {
            return {
                currentDate: "2019/04/09",
                nextDb: "",
                dbs: [
                    {name: "test1",instance:"mysql-vm1",jobnum:21},
                    {name: "test2",instance:"mysql-vm2"},


                ]
            };
        },
        methods: {
            dbHandel(name){
                //alert(name)
                this.$router.push({ path: '/db/update/' + name });

            },
            selectExec(name,instance){
                //alert(name)
                this.$router.push({ path: '/db/select/' + instance + "?dbname=" + name  });
            },
            slowLogShow(name,instance){
                //alert(name)
                this.$router.push({ path: '/db/slowlog/' + instance + "?dbname=" + name  });
            },
            backupDb(name,instance){
                //alert(name)
                alert("TODO: add backup job as bg run")
                //this.$router.push({ path: '/db/slowlog/' + instance + "?dbname=" + name  });
            },
            getDbs(){
                getDbList().then((res) => {
                        console.log(res.data.dblist)
                        //this.userList = res.data.users
                        this.dbs = res.data.dblist

                    }
                )
            },
        },
        mounted() {
            this.getDbs();
        },
    }
</script>